<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>百度网页</title>
    <style type="text/css">
        /*导航栏*/
        .nav{
            width: 100%;!important;
            height: 50px;
            min-width: 1226px;
            margin-top: 10px;
        }
        .nav li{
            list-style: none;
            float: left;
            margin: 0px 10px;
            padding: 15px 0px;

        }
        .nav a{
            text-decoration: none;
            margin: 15px;
            font-size: 20px;
            color: black;
        }
        .nav a:hover{
            color: blue;
        }
        .gengduo{
            background-color: blue;
            padding: 7px 25px;
            border-radius:15px;
        }
        .gengduo:hover{
            background-color: mediumblue;
        }
        /*二级菜单*/
       .nav li ul{
            list-style: none;
            margin-left: -50px;
            width: 160px;
            padding: 10px 10px;
            text-align: center;
            background-color:whitesmoke;
            border-radius: 40px;
            position: absolute;
            left: -999px;
        }
       .nav li ul li a{
           font-size: 25px;
           color: black;
           line-height: 0px;
       }
        .nav li:hover ul{
            left: auto;
            z-index: 9999;
        }
        .nav li:hover ul li{
            float: none;
        }
        .nav li:hover ul li,.nav li:hover ul li a{
            display: block;
        }
        .nav li:hover ul li a:hover{
            color: blue;
            transition: 0.1s;
        }
        /*logo*/
        .box{
            width: 1000PX;
            margin: 110px auto;
        }
        .box img{
            width: 400px;
            position: relative;
            left: 280px;
        }
        /*搜索框*/
        .serach{
            width: 1000px;
            height: 70px;
            margin-top: 35px;
        }
        .serach input{
            width: 1000px;
            height: 70px;
            border-radius: 10px;
            margin-left: -90px;
            outline: medium;
            font-size: 25px;
        }
        .serach input:focus{
            border-radius: 10px 0px 0px 10px;
            border:  3px solid dodgerblue;
          /*  width: 100%;*/

        }
        .baiduyixia{
            width: 190px;
            height: 70px;
            float: right;
        }
        .baiduyixia input{
            width: 190px;
            height: 80.5px;
            border-radius: 0px 10px 10px 0px;
            font-size: 30px;
            background-color: blue;
            color: white;
            text-align: center;
            position: absolute;
            top: 399px;
            margin-left: 90px;
            border: none;
            cursor: pointer;
            box-shadow: none;
            outline: medium;
        }
        a input:hover{
            background-color: mediumblue;
        }
        .resou{
            width: 1185px;
            height: 60px;
            margin: -20px auto;
        }
        .resou a{
            text-decoration: none;
            font-size: 21px;
            color: black;
            margin-top: 20px;
        }
        .new{
            width: 1270px;
            height: 90px;
            /* background-color: red;*/
            margin: -30px auto;
        }
        .new ul{
            width: 1349px;
            float: left;
            list-style: none;
            font-size: 25px;
            text-align: left;
            margin-top: 1px;
        }
        .new ul li a{
            text-decoration: none;
            color: black;
        }
        .new ul li a:hover{
            color: blue;
        }
        .odd{
            margin-right: 59px;
            margin: 18px;
            margin-left: 1px;
        }
        .even{
            position: relative;
            margin: 18px;
            top: -145px;
            margin-left: 770px;
        }
    </style>
</head>
<body>
<div class="nav">
    <li><a href="http://news.baidu.com/百度.html" target="_blank">新闻</a></li>
    <li><a href="https://www.hao123.com/" target="_blank" style="font-weight: bold">hao123</a></li>
    <li><a href="https://map.baidu.com/@12661677,4067144,13z" target="_blank">地图</a></li>
    <li><a href="https://live.baidu.com/百度.html" target="_blank">直播</a></li>
    <li><a href="https://haokan.baidu.com/百度.html?sfrom=baidu-top" target="_blank">视频</a></li>
    <li><a href="http://tieba.baidu.com/f/user/passport?jumpUrl=http://tieba.baidu.com" target="_blank">贴吧</a></li>
    <li><a href="https://xueshu.baidu.com/百度.html" target="_blank">学术</a></li>
    <li><a href="">设置</a>
        <ul>
            <li><a href="">搜索设置</a></li>
            <li><a href="">高级搜索</a></li>
            <li><a href="">关闭预测</a></li>
            <li><a href="https://passport.baidu.com/v2/百度.html?login&tpl=pc&extrajson=%7B%22l%22%3A%22%22%2C%22s%22%3A%22%22%2C%22src%22%3A%22se_070003%22%7D&u=https%3A%2F%2Fwww.baidu.com%2Fduty%2Fprivacysettings.html" target="_blank">隐私设置</a></li>
            <li><a href="">关闭热榜</a></li>
        </ul>
    </li>
    <li><a href="" class="gengduo" style="color: white">更多</a></li>
</div>
<div class="box">
    <img src="img/1.png">
    <div class="serach">
        <input type="text" style="padding-left: 20px" placeholder="搜索...">
    </div>
    <div class="baiduyixia">
        <a href="https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd=%E7%99%BE%E5%BA%A6&fenlei=256&rsv_pq=d4330bad006eff11&rsv_t=482btjB8Dny1oPiffLPj04eW7zbRlcw7lTUNXeV%2B2Z0yTCqUSvcAzbeLXlI&rqlang=cn&rsv_enter=1&rsv_dl=tb&rsv_sug3=14&rsv_sug1=13&rsv_sug7=101&rsv_sug2=0&rsv_btype=i&prefixsug=%25E7%2599%25BE%25E5%25BA%25A6&rsp=5&inputT=3734&rsv_sug4=4682&rsv_sug=1"><input type="submit" value="百度一下"></a>
    </div>
</div>
<div class="new">
    <div class="resou">
        <a href="http://top.baidu.com/百度.html?fr=mhd_card">百度热榜</a>
    </div>
    <ul>
        <li class="odd"><a href="https://www.baidu.com/s?cl=3&tn=baidutop10&fr=top1000&wd=%E8%BF%99%E5%9C%BA%E5%AF%B9%E8%AF%9D%E4%B8%AD%E6%96%B9%E6%98%8E%E7%A1%AE%E9%87%8A%E6%94%BE%E4%B8%89%E4%B8%AA%E4%BF%A1%E5%8F%B7&rsv_idx=2&rsv_dl=fyb_n_homepage&hisfilter=1" target="_blank"><font color="red">1</font>  这场对话中方明确释放三个信号 <font style="background-color: orange;border-radius: 7px;color: white;padding: 2px;font-size: 18px">热</font></a></li>
        <li class="odd"><a href="https://www.baidu.com/s?cl=3&tn=baidutop10&fr=top1000&wd=%E7%97%85%E4%BA%BA%E5%92%A8%E8%AF%A2%E6%8D%90%E9%81%97%E4%BA%A7%E8%A2%AB%E6%94%B620%E4%B8%87%3F%E5%BD%93%E5%9C%B0%E5%9B%9E%E5%BA%94&rsv_idx=2&rsv_dl=fyb_n_homepage&hisfilter=1" target="_blank"><font color="#ff4500">2</font> 病人咨询捐遗产被收20万？当地回应 <font style="background-color: red;border-radius: 7px;color: white;padding: 2px;font-size: 18px">新</font></a></li>
        <li class="odd"><a href="https://www.baidu.com/s?cl=3&tn=baidutop10&fr=top1000&wd=%E9%9F%A9%E5%9B%BD%E6%B5%B7%E8%AD%A6%E6%89%A3%E6%8A%BC2%E8%89%98%E4%B8%AD%E5%9B%BD%E6%B8%94%E8%88%B9&rsv_idx=2&rsv_dl=fyb_n_homepage&hisfilter=1" target="_blank"><font color="orange">3</font> 东京奥运损失或超1500亿日元</a></li>
        <li class="even"><a href="https://www.baidu.com/s?cl=3&tn=baidutop10&fr=top1000&wd=%E6%88%91%E5%9B%BD%E6%88%90%E5%B9%B4%E4%BA%BA%E5%92%8C%E5%AD%A6%E7%94%9F%E4%B8%83%E6%88%90%E7%9D%A1%E7%9C%A0%E4%B8%8D%E8%BE%BE%E6%A0%87&rsv_idx=2&rsv_dl=fyb_n_homepage&hisfilter=1" target="_blank">4  中国成年人和学生七成睡眠不达标</a></li>
        <li class="even"><a href="https://www.baidu.com/s?cl=3&tn=baidutop10&fr=top1000&wd=%E5%9B%BD%E9%99%85%E7%9D%A1%E7%9C%A0%E6%97%A5&rsv_idx=2&rsv_dl=fyb_n_homepage&hisfilter=1" target="_blank">5  喝了酒真能睡得好吗？ <font style="background-color: blue;border-radius: 7px;color: white;font-size: 18px;padding: 2px">荐</font></a></li>
        <li class="even"><a href="https://www.baidu.com/s?cl=3&tn=baidutop10&fr=top1000&wd=%E4%B8%89%E6%98%9F%E5%A0%86%E8%80%83%E5%8F%A4%E7%8E%B0%E5%9C%BA%E4%B8%BA%E4%BB%80%E4%B9%88%E7%9B%96%E6%B9%BF%E6%AF%9B%E5%B7%BE%3F&rsv_idx=2&rsv_dl=fyb_n_homepage&hisfilter=1" target="_blank">6  三星堆考古现场为何盖湿毛巾</a></li>
    </ul>
</div>
</body>
</html>